<template>
    <div class="content">


        <div class="search-line" style="margin-top: 10px; margin-left: 6px;">

            <el-input placeholder="订单号" prefix-icon="el-icon-search" v-model="order_num" style="width: 200px;">
            </el-input>

            <!-- 
            <el-select v-model="order_type" placeholder="订单状态" style="margin-left: 20px;">
                <el-option v-for="item in order_status" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select> -->

            <el-date-picker v-model="dataValue" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" @change="dataChange"
                value-format="yyyy-MM-dd HH:mm:ss" style="width: 320px; margin-left: 30px;">
            </el-date-picker>

            <el-button type="primary" style="width: 80px; margin-left: 20px;">查询</el-button>
            <el-button type=""
                style="width: 80px; margin-left: 20px; background-color: #4262AC; color: #fff;">重置</el-button>

        </div>


        <el-tabs v-model="status_name" @tab-click="tabClick" style="margin-left: 6px; margin-top: 12px;">
            <el-tab-pane v-for="item in order_status" :key="item.value" :label="item.label"></el-tab-pane>
        </el-tabs>

        <download-excel :data='tableData' name="订单列表.xls" class="export-excel-wrapper" :fields='json_fields'
            style="width: 80px; height: 30px; margin-left: 6px; margin-top: 8px;">
            <el-button type="primary">导出excel</el-button>
        </download-excel>



        <div>
            <el-table border ref="multipleTable" :data="tableData" tooltip-effect="dark"
                style="width: 100%;margin-top: 20px; margin-left: 6px;" @selection-change="handleSelectionChange" height="">
                <!-- <el-table-column type="selection" width="55" align="center">
                </el-table-column> -->
                <el-table-column prop="order_sn" label="订单单号" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column prop="pay_time" label="支付时间" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="订单状态"  show-overflow-tooltip align="center">
                    <template slot-scope="scope">{{
                        selectStatus(scope.row.status)
                    }}</template>
                </el-table-column>
                <el-table-column label="出库单编号" prop="order_sn" show-overflow-tooltip
                    align="center"></el-table-column>
                <el-table-column label="操作时间" prop="updateTime" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="会员手机" prop="mobile" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="会员名" prop="mobile" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="支付金额" prop="payable_money" show-overflow-tooltip align="center"></el-table-column>
                <!-- <el-table-column label="操作员" prop="operator" show-overflow-tooltip align="center"></el-table-column> -->







                <!-- <el-table-column label="创建时间" width="180px" align="center">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column label="更新时间" align="center" width="180px" >
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column prop="sortName" label="所属类目" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="inventory" label="库存" width="100px" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="auditStatus" label="审核状态" align="center" width="100px" show-overflow-tooltip>
                    <template slot-scope="scope">{{ selectAuditStatus(scope.row.auditStatus) }}</template>
                </el-table-column>
                <el-table-column prop="address" label="上架状态" width="100px" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.listingStatus == 0 ? '未上架' : '已上架' }}</template>
                </el-table-column> -->

                <el-table-column fixed="right" label="操作" align="center" width="200px">
                    <template slot-scope="scope">
                        <el-button @click="lookDetails(scope.row)" type="text" size="mini">详情</el-button>
                        <el-button @click="lookOutBand(scope.row)" type="text" size="mini"
                            v-if="scope.row.orderStatus == '待出库'">出库</el-button>
                        <el-button type="text" size="mini"
                            v-if="scope.row.orderStatus == '申请退货' || scope.row.orderStatus == '申请换货'">审核</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
                :total="50">
            </el-pagination>

        </div>


        <!-- 订单详情弹出框 -->
        <el-dialog title="订单详情" :visible.sync="orderDetailsCenterDialogVisible" width="50%">

            <div>
                <div style="font-size: 14sp;">订单编号：{{ currentRow.order_sn}}</div>
                <div style="font-size: 12px; color: #333;">
                    <el-table border ref="dialogTable" :data="currentDetails.orderGoods" tooltip-effect="dark"
                        style="width: 100%;margin-top: 20px;" @selection-change="handleSelectionChange" height="">
                        <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                        <el-table-column label="商品名称" prop="goodsName" show-overflow-tooltip
                            align="center"></el-table-column>
                        <el-table-column label="商品分类" prop="goodsSort" show-overflow-tooltip
                            align="center"></el-table-column>
                        <el-table-column label="结算单价" prop="settlementUnitPrice" show-overflow-tooltip
                            align="center"></el-table-column>
                        <el-table-column label="数量" prop="goodsNum" show-overflow-tooltip align="center"></el-table-column>
                        <el-table-column label="小计" prop="subtotal" show-overflow-tooltip align="center"></el-table-column>
                    </el-table>
                    <div style="display: flex; margin-top: 20px;">
                        <div>订单数量：{{ currentDetails.totalNum }}个</div>
                        <div style="margin-left: 30px;">运费：{{ currentDetails.freightMoney }}元</div>
                        <div style="margin-left: 30px;">商品金额总计：{{ currentDetails.totalProductAmount }}元</div>
                        <div style="margin-left: 30px;">总金额：{{ currentDetails.totalAmount }}元</div>
                    </div>
                    <div style="display: flex;margin-top: 15px;">
                        <div style="flex: 1;">订单状态：{{ currentDetails.orderStatus }}</div>
                        <div style="flex: 1;">关联出货单：{{ currentDetails.associatedStockOutOrders }} </div>
                    </div>
                    <div style="display: flex;margin-top: 15px;">
                        <div style="flex: 1;">支付时间：{{ currentDetails.payTime }}</div>
                        <div style="flex: 1;">出库时间：{{ currentDetails.associatedStockOutOrders }} </div>
                    </div>
                    <div style="display: flex;margin-top: 15px;">
                        <div style="flex: 1;">收货人：{{ currentDetails.receiver }}</div>
                        <div style="flex: 1;">联系电话：{{ currentDetails.phone }} </div>
                    </div>
                    <div style="display: flex; margin-top: 15px;">
                        <div>收货地址：</div>
                        <div>{{ currentDetails.shippingAddress }} </div>
                    </div>
                    <div style="display: flex; justify-content: space-between;margin-top: 15px;">
                        <div style="flex: 1;">快递公司：{{ currentDetails.expressCompany }}</div>
                        <div style="flex: 1;">快递单号：{{ currentDetails.trackingNumber }} </div>
                    </div>

                    <div style="display: flex; margin-top: 15px;">
                        <div>备注：</div>

                        <div
                            style="flex: 1; height: 60px; overflow: auto; border: 1px solid #ccc; border-radius: 4px; background-color: #eeeeee;">
                            <div style="margin-top: 9px; margin-left: 14px;">{{ currentDetails.remarks }}</div>
                        </div>

                    </div>

                    <!-- <div style="position: absolute; right: 20px; margin-top: 10px; margin-bottom: 20px;">操作员：张三</div> -->
                    <div style="width: 100%; text-align: right; margin-top: 20px;">操作员：{{ currentDetails.operator }}</div>

                </div>
            </div>
        </el-dialog>


        <!-- 出库详情弹出框 -->
        <el-dialog title="订单出库" :visible.sync="outboundCenterDialogVisible" width="50%">

            <div style="height: 800px; overflow: auto; display: flex; flex-direction: column; ">
                <div style="font-size: 14sp;">订单编号：{{ currentRow.orderNum }}</div>
                <div style="font-size: 12px; color: #333;">
                    <el-table border ref="dialogTable" :data="currentDetails.orderGoods" tooltip-effect="dark"
                        style="width: 100%;margin-top: 20px;" @selection-change="handleSelectionChange" height="">
                        <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                        <el-table-column label="商品名称" prop="goodsName" show-overflow-tooltip
                            align="center"></el-table-column>
                        <el-table-column label="商品分类" prop="goodsSort" show-overflow-tooltip
                            align="center"></el-table-column>
                        <el-table-column label="结算单价" prop="settlementUnitPrice" show-overflow-tooltip
                            align="center"></el-table-column>
                        <el-table-column label="数量" prop="goodsNum" show-overflow-tooltip align="center"></el-table-column>
                        <el-table-column label="小计" prop="subtotal" show-overflow-tooltip align="center"></el-table-column>
                    </el-table>
                    <div style="display: flex; margin-top: 20px;">
                        <div>订单数量：{{ currentDetails.totalNum }}个</div>
                        <div style="margin-left: 30px;">运费：{{ currentDetails.freightMoney }}元</div>
                        <div style="margin-left: 30px;">商品金额总计：{{ currentDetails.totalProductAmount }}元</div>
                        <div style="margin-left: 30px;">总金额：{{ currentDetails.totalAmount }}元</div>
                    </div>
                    <div style="display: flex;margin-top: 15px;">
                        <div style="flex: 1;">订单状态：{{ currentDetails.orderStatus }}</div>
                        <div style="flex: 1;">关联出货单：{{ currentDetails.associatedStockOutOrders }} </div>
                    </div>
                    <div style="display: flex;margin-top: 15px;">
                        <div style="flex: 1;">支付时间：{{ currentDetails.payTime }}</div>
                        <div style="flex: 1;">出库时间：{{ currentDetails.associatedStockOutOrders }} </div>
                    </div>
                    <div style="display: flex;margin-top: 15px;">
                        <div style="flex: 1;">收货人：{{ currentDetails.receiver }}</div>
                        <div style="flex: 1;">联系电话：{{ currentDetails.phone }} </div>
                    </div>
                    <div style="display: flex; margin-top: 15px;">
                        <div>收货地址：</div>
                        <div>{{ currentDetails.shippingAddress }} </div>
                    </div>
                    <div style="display: flex; justify-content: space-between;margin-top: 15px; align-items: center;">
                        <div style="flex: 1;">快递公司：<el-select v-model="outBandExpressCompanyValue" placeholder="请选择"
                                style="width: 120px;">
                                <el-option v-for="item in outBandExpressCompanies" :label="item.label" :value="item.label"
                                    :key="item.value"></el-option>
                            </el-select>
                        </div>
                        <div style="flex: 1; display: flex; align-items: center;">
                            <div style="width: 80px;">快递单号：</div>
                            <el-input style="flex-grow: 1;" v-model="outBandExpressNumber" placeholder="请输入快递单号"></el-input>
                        </div>
                    </div>

                    <div style="display: flex; margin-top: 15px;">
                        <div>备注：</div>

                        <div
                            style="flex: 1; height: 60px; overflow: auto; border: 1px solid #ccc; border-radius: 4px; background-color: #eeeeee;">
                            <div style="margin-top: 9px; margin-left: 14px;">{{ currentDetails.remarks }}</div>
                        </div>

                    </div>

                    <!-- <div style="position: absolute; right: 20px; margin-top: 10px; margin-bottom: 20px;">操作员：张三</div> -->
                    <div style="width: 100%; text-align: right; margin-top: 20px;">操作员：{{ currentDetails.operator }}</div>


                </div>
                <el-button style="position: absolute; bottom: 20px; align-self: center;" type="primary"
                    @click="btnOutBandClick">确定出库</el-button>
            </div>
            <!-- <span>需要注意的是内容是默认不居中的</span> -->
            <!-- <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
</span> -->
        </el-dialog>

    </div>
</template>

<script>
import { get } from '@/utils/request';
import vueJsonExcel from 'vue-json-excel';
import { url } from '@/utils/url';
export default {
    name: '',
    data() {
        return {
            type:1,
            page: 1,
            start_time: '',
            end_time: '',
            order_num: '',
            dataValue: [],
            order_status: [

                {
                    value: 1,
                    label: '全部'
                },

                {
                    value: 2,
                    label: '待出库'
                }, {
                    value: 3,
                    label: '已出库'
                }, {
                    value: 4,
                    label: '申请退货'
                }, {
                    value: 5,
                    label: '申请换货'
                }, {
                    value: 6,
                    label: '已退货'
                }, {
                    value: 7,
                    label: '已换货'
                }],
            order_type: '',
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            select_datas: '',
            tableData: [
                {
                    order_sn: '203o32112321',
                    payTime: '2023-11-11-01:23',
                    orderStatus: '待出库',
                    outboundOrderNum: '20332112321',
                    operatingTime: '2023-5-15',
                    phone: '18638254669',
                    userName: '李四',
                    payMoney: '500',
                    operator: '1号操作员'


                },
            ],

            json_fields: {
                订单号: "orderNum",    //常规字段
                姓名: "payTime", //支持嵌套属性
                订单状态: "orderStatus",
                出库时间: "outboundOrderNum",
                操作时间: "operatingTime",
                会员手机: "phone",
                会员名: "userName",
                支付金额: "payMoney",
                操作员: "operator"
            },
            orderDetailsCenterDialogVisible: false,
            outboundCenterDialogVisible: false,
            currentRow: '',
            currentDetails: {
                orderGoods: [{
                    goodsName: '鼠标',
                    goodsSort: '电器',
                    settlementUnitPrice: '200',
                    goodsNum: '2',
                    subtotal: '400'
                },
                {
                    goodsName: '鼠标',
                    goodsSort: '电器',
                    settlementUnitPrice: '200',
                    goodsNum: '2',
                    subtotal: '400'
                },
                {
                    goodsName: '鼠标',
                    goodsSort: '电器',
                    settlementUnitPrice: '200',
                    goodsNum: '2',
                    subtotal: '400'
                },
                {
                    goodsName: '鼠标',
                    goodsSort: '电器',
                    settlementUnitPrice: '200',
                    goodsNum: '2',
                    subtotal: '400'
                },
                {
                    goodsName: '鼠标',
                    goodsSort: '电器',
                    settlementUnitPrice: '200',
                    goodsNum: '2',
                    subtotal: '400'
                },
                {
                    goodsName: '鼠标',
                    goodsSort: '电器',
                    settlementUnitPrice: '200',
                    goodsNum: '2',
                    subtotal: '400'
                }],
                orderNum: '203o32112321',
                payTime: '2023-11-11-01:23',                        //支付时间
                orderStatus: '待出库',
                outboundOrderNum: '20332112321',                    //出库时间
                operatingTime: '2023-5-15',                         //操作时间
                phone: '18638254669',
                userName: '李四',
                payMoney: '500',
                operator: '1号操作员',
                totalNum: '6',                                          //总计
                freightMoney: '10',                                  //运费    
                totalProductAmount: '5000',                          //商品金额总计 
                totalAmount: '5020',                                 //金额总计
                associatedStockOutOrders: '151212152154512',         //关联出库单     
                receiver: '收货人',
                shippingAddress: '河南省郑州市管城区回族区财富中心广场三号楼810室',                                  //收货地址
                expressCompany: '中通快读',                           //快递公司
                trackingNumber: '123123123',                          //快递单号
                remarks: '我是一个备注',                               //备注

            },

            outBandExpressCompanyValue: '', //出库的快递公司
            outBandExpressCompanies: [
                {
                    value: 0,
                    label: '圆通快递'
                },
                {
                    value: 1,
                    label: '中通快递'
                },
                {
                    value: 2,
                    label: '顺丰快递'
                },
                {
                    value: 3,
                    label: '申通快递'
                }
            ],
            outBandExpressNumber: ''




        }
    },
    components: {

    },
    computed: {

    },
    mounted() {
        this.getOrders()
    },
    methods: {
        selectStatus(auditStatus) {
            switch (auditStatus) {
                case 0:
                    return "待支付";
                case 1:
                    return "待发货";
                case 2:
                    return "待收货";
                case 3:    
                    return "已完成";
            }
        },
        getOrders() {
            get(url.orders, {
                page: this.page,
                per_page: 20,
                type: this.type,
                start:this.start_time,
                end:this.end_time
            }).then(res => {
                this.tableData = res.data.data
            }).catch(error => {
                console.error(url.fullMinuses + error);
            })
        },

        //日期更换事件
        dataChange(data) {
            console.log(JSON.stringify(this.dataValue))
            this.start_time = data[0],
                this.end_time = data[1]
        },


        //tab选中事件
        tabClick(tab) {
            console.log(tab.index)
            this.type =tab.index+1;
        },

        //点击出库
        lookOutBand(row) {
            console.log('lookOutBand执行' + row)
            this.currentRow = row
            this.outboundCenterDialogVisible = true
        },
        //点击订单详情
        lookDetails(row) {
            console.log('lookOutBand执行' + row)
            this.currentRow = row
            this.orderDetailsCenterDialogVisible = true
        },
        btnOutBandClick() {

            this.$message({
                message: JSON.stringify(this.currentDetails),
                type: 'info'
            });

            this.outboundCenterDialogVisible = false
        }

    },
}
</script>

<style lang="scss">
.content {
    overflow: auto;
    background: white;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    border: solid 6px #F5F5F5;

    .search-line {
        display: flex;
        align-items: center;
    }
}
</style>
